<template>
  <div class="user-login-container">
    <div class="login-card">
      <h2 class="login-title">欢迎登录</h2>
      <p class="login-subtitle">请输入您的账号和密码</p>
      
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-item">
          <label for="username">用户名</label>
          <input 
            id="username"
            type="text" 
            v-model.trim="form.username" 
            :class="{ 'is-error': errors?.username }"
            placeholder="请输入用户名"
          />
          <p v-if="errors?.username" class="error-message">
            <i class="icon-error"></i>{{ errors.username }}
          </p>
        </div>

        <div class="form-item">
          <label for="password">密码</label>
          <input 
            id="password"
            type="password" 
            v-model.trim="form.password" 
            :class="{ 'is-error': errors?.password }"
            placeholder="请输入密码"
          />
          <p v-if="errors?.password" class="error-message">
            <i class="icon-error"></i>{{ errors.password }}
          </p>
        </div>

        <div class="form-actions">
          <button type="submit" :disabled="isLoading" class="login-button">
            {{ isLoading ? '登录中...' : '登 录' }}
          </button>
        </div>
      </form>

      <div class="extra-links">
        <router-link to="/register_management" class="link-item">注册账号</router-link>
        <span class="divider">|</span>
        <a href="#" class="link-item">忘记密码</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request';

// 表单数据
const form = reactive({
  username: 'admin',
  password: '123456'
});

// 错误信息 - 确保初始化为空对象
const errors = reactive({
  username: '',
  password: ''
});

// 加载状态
const isLoading = ref(false);

// 路由实例
const router = useRouter();

// 表单验证
const validateForm = () => {
  let isValid = true;
  
  errors.username = '';
  errors.password = '';
  
  if (!form.username) {
    errors.username = '用户名不能为空';
    isValid = false;
  } else if (form.username.length < 3) {
    errors.username = '用户名至少3位';
    isValid = false;
  }

  if (!form.password) {
    errors.password = '密码不能为空';
    isValid = false;
  } else if (form.password.length < 6) {
    errors.password = '密码至少6位';
    isValid = false;
  }

  return isValid;
};

// 登录处理
const handleLogin = async () => {
  if (!validateForm()) return;

  try {
    isLoading.value = true;
    const response = await request({
      url: '/auth-service/auth/login',
      method: 'post',
      data: {
        username: form.username,
        password: form.password
      }
    });

    if (response.code === 200) {
      const { tokenInfo, user } = response.data;
      localStorage.setItem('token', tokenInfo);
      localStorage.setItem('userInfo', JSON.stringify(user));
      
      const redirect = router.currentRoute.value.query.redirect || '/home_page';
      router.push(redirect);
    }
  } catch (error) {
    // 错误处理已在 request.js 中完成
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.user-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 8px;
  color: #1a73e8;
  font-size: 24px;
  font-weight: 600;
}

.login-subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #6b7280;
  font-size: 14px;
}

.form-item {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e3e9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
  outline: none;
}

input.is-error {
  border-color: #f44336;
}

input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

.error-message {
  display: flex;
  align-items: center;
  color: #f44336;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

.icon-error {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #f44336;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat center;
  margin-right: 4px;
}

.form-actions {
  margin-top: 30px;
}

.login-button {
  width: 100%;
  padding: 14px;
  background-color: #1a73e8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.login-button:hover:not(:disabled) {
  background-color: #0d5bc2;
  transform: translateY(-1px);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.login-button:disabled {
  background-color: #e0e3e9;
  cursor: not-allowed;
}

.extra-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  color: #6b7280;
  font-size: 14px;
}

.link-item {
  color: #1a73e8;
  text-decoration: none;
  transition: color 0.3s;
}

.link-item:hover {
  color: #0d5bc2;
  text-decoration: underline;
}

.divider {
  margin: 0 12px;
  color: #e0e3e9;
}

@media (max-width: 480px) {
  .login-card {
    padding: 30px 20px;
  }
}
</style>